<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <!-- Google Chrome Frame也可以让IE用上Chrome的引擎: -->
    <meta name="renderer" content="webkit">
    <!--国产浏览器高速模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登入页面</title>

    <!-- 公共样式 开始 -->
    <link rel="shortcut icon" href="images/logo.ico"/>
    <link rel="bookmark" href="images/logo.ico"/>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <script type="text/javascript" src="framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="framework/frameAll.js"></script>
    <!-- 公共样式 结束 -->
    <link rel="stylesheet" type="text/css" href="css/login1.css">
    <script type="text/javascript" src="js/login1.js"></script>
</head>

<body>
<div class="loginBg"></div>
<div class="login_main">
    <div class="box">
        <div class="left">
            <img src="images/login.gif"/>
            <p>作业管理系统</p>
        </div>
        <div class="right">
            <form class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label login_title">
                        <i class="iconfont icon-gerenzhongxin-denglu"></i></label>
                    <div class="layui-input-block login_input">
                        <input type="text" name="username" required lay-verify="required|username" autocomplete="off"
                               placeholder="请输入您的账号" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label login_title">
                        <i class="iconfont icon-mima1"></i></label>
                    <div class="layui-input-block login_input">
                        <input type="password" name="password" required lay-verify="required|password" autocomplete="off"
                               placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid login_but" lay-submit lay-filter="loginBut">登 录</button>
                </div>
                <div class="layui-form-item">
                    <input type="radio" name="role" value="admin" title="管理员" lay-filter="userType">
                    <input type="radio" name="role" value="teacher" title="老师" lay-filter="userType">
                    <input type="radio" name="role" value="student" title="学生" lay-filter="userType" checked>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(loginBut)', function (data) {
            var field = data.field;
            $.ajax({
                type: "post",
                url: "/UserServlet.do",
                data: {
                    action: "login",
                    role: field.role,
                    username: field.username,
                    password: field.password
                },
                dataType: "Json",
                success: function (data) {
                    console.log(data.tip);
                    switch (parseInt(data.tip)) {
                        case 0:
                            location.href = data.url;
                            break;
                        case 1:
                            $("input:eq(0)").focus();
                            layer.msg("账号不存在", {
                                icon: 5,
                                shift: 6
                            });
                            break;
                        case 2:
                            $("input:eq(1)").val("");
                            $("input:eq(1)").focus();
                            layer.msg("密码错误", {
                                icon: 5,
                                shift: 6
                            });
                            break;
                        default:
                            layer.msg("服务器连接失败！", {
                                icon: 5,
                                shift: 6
                            });
                    }
                }
            });
            return false;
        });
        //监听用户类型，改变风格
        form.on('radio(userType)', function (data) {
            if (data.value == "admin") {
                $(".loginBg").css("background-image", "url('images/admin.jpg')");
                $(".login_but").css("cssText", "background-color:#57c201 !important");
            }
            if (data.value == "teacher") {
                $(".loginBg").css("background-image", "url('images/teacher.jpg')");
                $(".login_but").css("cssText", "background-color:#16c6f9 !important");
            }
            if (data.value == "student") {
                $(".loginBg").css("background-image", "url('images/student.jpg')");
                $(".login_but").css("cssText", "background-color:#ffd205 !important");
            }
        });

        $.ajax({
            type: "get",
            url: "/UserServlet.do",
            data: {action: "getUser"},
            dataType: "Json",
            success: function (data) {
                if (data.user) {
                    location.href = data.url;
                }
            }
        });
        var username = getCookie('username');
        if (username) {
            $("input[name=username]").val(username);
        }
        var role = getCookie('role');
        switch (role) {
            case "admin":
                $(".loginBg").css("background", "url('images/admin.jpg')");
                $(".login_but").css("cssText", "background-color:#57c201 !important");
                $("input[value=admin]").attr("checked", "checked");
                break;
            case "teacher":
                $(".loginBg").css("background-image", "url('images/teacher.jpg')");
                $(".login_but").css("cssText", "background-color:#16c6f9 !important");
                $("input[value=teacher]").attr("checked", "checked");
                break;
            default:
                $(".loginBg").css("background-image", "url('images/student.jpg')");
                $(".login_but").css("cssText", "background-color:#ffd205 !important");
                $("input[value=student]").attr("checked", "checked");
        }
        form.render();
    });
</script>
</body>

</html>